// 本组件用于集团运营首页，计划管理的二级页面（三种）
<template>
  <div>
    <el-table v-if="dataList.length > 0" class="monthRateBox" :data="dataList" style="width: 100%" border row-key="chargeItemGroup" default-expand-all :tree-props="{ children: 'child' }">
      <el-table-column key="列标题" align="left" prop="chargeItemGroupName" width="190">
        <template slot-scope="scope" slot="header" >
          <el-button class="margin-left-20" v-if="!isOperate" size="mini" @click="showDialogFn(scope.row)" type="text">汇总</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column key="列标题" align="left" prop="chargeItemGroupName" width="190"></el-table-column> -->
      <el-table-column v-for="(monthItem, monthIndex) in monthList" :label="monthItem.month + '月'" :key="monthItem.month" :class-name="setClassName(monthItem.month)" align="center">
        <template slot-scope="scope">
          <div v-if="childDataMap">{{ childDataMap[scope.row.chargeItemGroup][monthIndex].amount | fmoneyThousand }}</div>
        </template>
      </el-table-column>
    </el-table>

    <dialog-plan-year ref="planYear" title="年度汇总" :hasIncome="hasIncome" :hasPay="hasPay"></dialog-plan-year>
    <dialog-plan-execute ref="planExecute" title="年度汇总" :hasIncome="hasIncome" :hasPay="hasPay"></dialog-plan-execute>
  </div>
</template>
<script>
  import lodash from 'lodash';
  import { toFixedTwo } from '@/common/js/utils';
  import dialogPlanYear from './dialogPlanYear';
  import dialogPlanExecute from './dialogPlanExecute';

  export default {
    props: {
      selectTime: {
        type: String,
        default: '',
      },
      chartsData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //是否显示收入相关
      hasIncome: {
        type: Boolean,
        default: false,
      },
      //是否显示支出相关
      hasPay: {
        type: Boolean,
        default: false,
      },
      //是否是集团运营
      isOperate: {
        type: Boolean,
        default: false,
      },
      //计划类型 year:集团年计划  compile:项目年计划编制  execute:项目计划执行
      planType: {
        type: String,
        default: '',
      },
    },
    watch: {
      chartsData: {
        deep: true,
        handler(res) {
          let newObj = JSON.parse(JSON.stringify(res));
          this.getData(newObj);
        },
      },
      selectTime: {
        immediate: true,
        handler(newVal, oldVal) {
          let month = newVal.split('-')[1];
          this.currentMonth = Number(month) || '';
        },
      },
    },
    data() {
      return {
        dataList: [],
        monthList: [],
        currentMonth: null,
        childDataMap: null,
      };
    },
    computed: {
      hasIncomePay() {
        if (this.hasIncome && this.hasPay) {
          return true;
        }
        return false;
      },
    },
    methods: {
      async getData(res) {
        let monthList = [];
        let dataList = [];
        let childDataMap = {};

        if (this.hasIncome) {
          dataList.push({
            chargeItemGroup: '现金流入',
            chargeItemGroupName: '现金流入',
            child: [],
          });
          childDataMap['现金流入'] = [];
        }

        if (this.hasPay) {
          dataList.push({
            chargeItemGroup: '支出',
            chargeItemGroupName: '支出',
            data: [],
            child: [],
          });
          childDataMap['支出'] = [];
        }

        if (res.itemList && res.itemList.length) {
          res.itemList.forEach(item => {
            // 组装月数据
            monthList.push({
              month: item.month,
            });

            // 组装收入数据
            if (this.hasIncome) {
              childDataMap['现金流入'].push({
                amount: item.incomeCash || 0,
              });
            }

            // 组装支出数据
            if (this.hasPay) {
              childDataMap['支出'].push({
                amount: item.paymentCash || 0,
              });
            }

            // 组装收入数据
            if (this.hasIncome) {
              item.incomeList.forEach(incomeItem => {
                if (childDataMap[incomeItem.chargeItemGroup]) {
                  childDataMap[incomeItem.chargeItemGroup].push(incomeItem);
                } else {
                  childDataMap[incomeItem.chargeItemGroup] = [incomeItem];

                  dataList[0].child.push({
                    chargeItemGroup: incomeItem.chargeItemGroup,
                    chargeItemGroupName: incomeItem.chargeItemGroupName,
                  });
                }
              });
            }

            // 组装支出数据
            if (this.hasPay) {
              item.paymentList.forEach(payItem => {
                if (childDataMap[payItem.chargeItemGroup]) {
                  childDataMap[payItem.chargeItemGroup].push(payItem);
                } else {
                  childDataMap[payItem.chargeItemGroup] = [payItem];

                  let payIndex = 0;
                  if (this.hasIncomePay) payIndex = 1;
                  else if (this.hasPay) payIndex = 0;

                  dataList[payIndex].child.push({
                    chargeItemGroup: payItem.chargeItemGroup,
                    chargeItemGroupName: payItem.chargeItemGroupName,
                  });
                }
              });
            }
          });
        }

        this.monthList = monthList;
        this.dataList = dataList;
        this.childDataMap = childDataMap;
      },

      setClassName(month) {
        let classname = 'monthColumBox';
        if (month == this.currentMonth) {
          classname += ' currentMonthStyle';
        }
        if (this.currentMonth && month > this.currentMonth) {
          classname += ' bg-gray';
        }
        return classname;
      },

      //点击显示的弹窗
      async showDialogFn(data) {
        if (this.planType == 'year' || this.planType == 'compile') {
          this.$refs.planYear.init();
        } else if (this.planType == 'execute') {
          this.$refs.planExecute.init();
        }
      },
    },
    components: { dialogPlanYear, dialogPlanExecute },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .currentMonthStyle .cell {
    // color: red;
  }
  ::v-deep .el-table__cell {
    padding: 0;
    height: 48px;
  }
  ::v-deep .bg-gray {
    background: rgba($color: #dbfeff, $alpha: 1) !important;
  }
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
</style>
